{extend name="common:base" /}

{block name="page_title"}{$controllerName}授权{/block}
{block name="style"}
<link href="https://cdn.staticfile.org/pretty-checkbox/3.0.3/pretty-checkbox.min.css" rel="stylesheet">
<style>
    .rule_node{line-height: 34px;}
    .rule_node .level2 {padding-left: 24px;}
    .rule_node .level3{padding-left:48px;}
    .rule_node p{clear: both;margin-bottom: 0;}
</style>
{/block}

{block name="content"}
<div class="box">
    <div class="box-header with-border"></div>
    <form class="form-horizontal ajaxForm3" name="form0" method="post" action="{:url('')}">
        <input type="hidden" name="id" value="{$model['id']}">
        <div class="box-body">
            <label class="col-sm-2 control-label">组名</label>
            <div class="col-xs-10">
                {$model['title']}
            </div>
        </div>
        <div class="box-body" id="app">
            <label class="col-sm-2 control-label">权限</label>
            <div class="col-sm-10 rule_node">
                <template v-for="v in list">
                <div class='level1'>
                    <div class="pretty p-default p-thick">
                        <input type="checkbox" name="rules[]" :value="v['id']" class="minimal" v-model="rules">
                        <div class="state p-info-o">
                            <label>{{v['title']}}（{{v['notcheck'] ? '不检测' : '检测'}}）</label>
                        </div>
                    </div>
                </div>
                <div class="level2">
                    <template v-for="vv in v.sub">
                        <div class="pretty p-default p-thick">
                            <input type="checkbox" name="rules[]" :value="vv['id']" class="minimal" v-model="rules">
                            <div class="state p-info-o">
                                <label>{{vv['title']}}（{{vv['notcheck'] ? '不检测' : '检测'}}）</label>
                            </div>
                        </div>
                        <div class="level3">
                            <template v-for="vvv in vv.sub">
                                <div class="pretty p-default p-thick">
                                    <input type="checkbox" name="rules[]" :value="vvv['id']" class="minimal" v-model="rules">
                                    <div class="state p-info-o">
                                        <label>{{vvv['title']}}（{{vvv['notcheck'] ? '不检测' : '检测'}}）</label>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
                </template>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <div class="row">
                <div class="col-xs-2"></div>
                <div class="col-xs-10">
                    <button type="submit" class="btn btn-info ladda-button" data-style="expand-left" data-plugin="ladda">
                        <span class="ladda-label"><i class="icon wb-arrow-expand margin-right-10" aria-hidden="true"></i>提交</span>
                    </button>
                    <a href="javascript:history.go(-1);" class="btn btn-default">返回</a>
                </div>
            </div>
        </div>
        <!-- /.box-footer -->
    </form>
</div>
{/block}

{block name="script"}
<script src="https://cdn.staticfile.org/vue/2.5.13/vue.js"></script>
<!--<script type="text/javascript" src="/static/admin/plugins/iCheck/icheck.js"></script>-->
<!--<script>-->
    <!--$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({-->
        <!--checkboxClass: 'icheckbox_minimal-blue',-->
        <!--radioClass: 'iradio_minimal-blue'-->
    <!--});-->
<!--</script>-->
<script>
    var arTreeJson = {$arTreeJson|raw};
    var app = new Vue({
        el: '#app',
        data: {
            list:arTreeJson
            ,rules:{$rules|raw}
        }
    });
</script>
<script>

</script>
{/block}